<template>
  <basic-dialog
    :visible.sync="reasonVisible"
    :width="'634px'"
    :title="'定标审批原因'"
    :ok-text="'确定'"
    :handle-close="handleCloseDialog"
    :handle-ok="handleConfirm"
    :handleOpened="handleOpenedDialog"
  >
    <el-form size="mini" class="reason-form" ref="formData" :model="formData">
      <el-row
        v-for="(item, index) in formData.priceExpTypeList"
        :key="index"
      >
        <el-card class="reason-card" shadow="never">
          <el-col :span="12">
            <el-form-item
              label="异常类型"
              label-width="70px"
              :prop="'priceExpTypeList.'+ index +'.priceExpType'"
            >
              <el-input readonly v-model="item.priceExpType" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="异常原因"
              label-width="80px"
              :prop="'priceExpTypeList.'+ index +'.concreteExpCauseId'"
              :rules="[{ required: true, message: '异常原因不能为空', trigger: 'change'}]"
            >
              <el-select
                v-model="item.concreteExpCauseId"
                placeholder="请选择异常原因"
                filterable
                @change="(val) => {handelExpCauseSelect(val, item)}"
              >
                <el-option
                  v-for="option in item.concreteExpCauseOptions"
                  :key="option.approvalTypeTemplateId"
                  :value="option.approvalTypeTemplateId"
                  :label="option.expContent"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label=""
              :prop="'priceExpTypeList.'+ index +'.content'"
              :rules="[{ required: true, message: '原因说明不能为空', trigger: 'change'}]"
            >
              <el-input
                v-model.trim="item.content"
                :placeholder="item.fillDesc || '请输入原因说明'"
                :maxlength="200"
                show-word-limit
                type="textarea"
                rows="4"
              />
            </el-form-item>
          </el-col>
        </el-card>
      </el-row>
    </el-form>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/pages/sourcing/components/BasicDialog';

export default {
  // 批量维护异常原因
  name: 'ApprovalReason',
  props: ['reasonVisible', 'expList'],
  components: {
    BasicDialog,
  },
  data () {
    return {
      formData: {
        priceExpTypeList: [
          /* {
            priceExpTypeId: '', // 异常类型id
            priceExpType: '', // 异常类型
            concreteExpCauseId: '', // 具体原因id
            concreteExpCause: '', // 具体原因
            content: '', // 具体描述
            fillDesc: '', // 填写说明
            concreteExpCauseOptions: [],
          }, */
        ],
      },
    };
  },
  methods: {
    handleOpenedDialog () {
      this.$refs.formData.resetFields()
      this.formData.priceExpTypeList = this.expList;
    },
    handelExpCauseSelect (val, row) {
      const { expContent, remark } = row.concreteExpCauseOptions.find(item => item.approvalTypeTemplateId == val)
      row.content = ''
      row.fillDesc = remark
      row.concreteExpCause = expContent
    },
    handleCloseDialog () {
      this.$emit('update:reasonVisible', false);
    },
    handleConfirm () {
      this.$refs.formData.validate(valid => {
        if (valid) {
          console.log(this.formData)
          this.$emit('approvalConfirmCallBack', this.formData.priceExpTypeList)
          this.handleCloseDialog()
        }
      })
    }
  }
};
</script>
<style scoped>
.reason-card {
  margin-bottom: 5px;
}
</style>
